<!--闯关列表测试-->
<template>
  <section class="rush-list" :style="{ 'margin-top': top}">
    <section class="card1-container" :style="{marginRight:spacing,marginLeft:spacing}">
      <section v-for="(item,index) in list" :key="index" class="card1-item" @click="toDetail(item)">
        <section class="img-box">
          <van-image :src="setImgPath(item.dailyImg, '')">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
            <template v-slot:error>
              <img src="../../images/base/default-placeholder.png" alt="">
            </template>
          </van-image>
        </section>
        <section class="card1-title etc">
          {{ item.dailyName }}
        </section>
        <section class="card1-des etc2">
          {{ item.dailyName }}
        </section>
      </section>
    </section>
  </section>
</template>
<script>
import mixins from './../mixins'
export default {
  name: 'VerticalCardOne',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      swiper: null,
      list: [],
      defaultList: [
        {
          dailyName: '安全生产知识',
          imgUrl: '220618f907d6117d0a4089aed8df7a0c8bf4c9.png',
          id: '1'
        },
        {
          dailyName: '安全生产知识',
          imgUrl: '220618f907d6117d0a4089aed8df7a0c8bf4c9.png',
          id: '2'
        },
        {
          dailyName: '安全生产知识',
          imgUrl: '220618f907d6117d0a4089aed8df7a0c8bf4c9.png',
          id: '3'
        }
      ],
      classifyId: '',
      id: '',
      page: 1,
      pageSize: 10
    }
  },
  computed: {
    spacing() {
      return this.px2rem(this.option.spacing || 0)
    }
  },

  async created() {
    if (this.isInitData) {
      await this.initData()
    } else {
      this.list = this.defaultList
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    setData(result) {
      this.list = result?.rushList.data?.rows ?? []
    },
    init() {
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/utility/rem.scss';
  .rush-list {
    position: relative;
    width: rem(750);
    padding: rem(12) rem(24);
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .card1-container{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      border-radius: rem(16);
      background-color: #fff;
      padding:rem(24);
      .card1-item{
        margin-bottom: rem(30);
        .img-box{
          width: rem(316);
          height: rem(378);
          .van-image{
            width: 100%;
            height: 100%;
            .van-image__error{
              > img {
                width: rem(120);
                height: rem(120);
              }
            }
          }
        }
        .card1-title{
          margin-top: rem(27);
          font-size: rem(28);
          font-weight: bold;
          text-align: left;
          color: #333;
        }
        .card1-des{
          margin-top: rem(16);
          font-size: rem(24);
          text-align: left;
          color: #999;
        }
      }
    }
  }

</style>
